<template>
  <div>
    <div class="quill-custom-css">
      <ZTinymce v-model="dataForm[scriptItem.text]"
                contentModel="text"
                ref="myTextEditor"
                :toolbar="toolbar"
                :height="50" />

      <div class="insert-token">
        <el-tooltip :open-delay="1000"
                    class="item"
                    effect="dark"
                    :content="$t('statement.iat')"
                    placement="top">
          <el-popover placement="top"
                      width="380"
                      v-model="insertTokenPopover">
            <div v-if="!isShowChild&&!isShowChildDrillThrough"
                 style="color:#000;font-size:16px;font-weight: 600;margin-bottom:10px">{{$t('statement.dt')}}</div>
            <div v-else
                 class="cursor_pointer"
                 style="color:#000;font-size:16px;font-weight: 600;margin-bottom:10px"
                 @click="gotoback"><i class="el-icon-arrow-left"></i>&nbsp;&nbsp;{{$t('statement.fn')}}</div>
            <el-input v-if="!isShowChild&&!isShowChildDrillThrough"
                      v-model="searchToken"
                      prefix-icon="el-icon-search"
                      :placeholder="$t('placeholder.search')"
                      @input="getFilterTokenList"
                      size="small"
                      style="margin-bottom:10px;"></el-input>
            <el-input v-if="isShowChild||isShowChildDrillThrough"
                      v-model="searchTokenchild"
                      prefix-icon="el-icon-search"
                      :placeholder="$t('placeholder.search')"
                      @input="getFilterTokenchildList"
                      size="small"
                      style="margin-bottom:10px;"></el-input>
            <div v-if="isTipsShow&&!isShowChild&&!isShowChildDrillThrough"
                 style="height:50px;backgroundColor:#E6F7FF;">
              <div style="float:left;width:90%;color:#138DC7;line-height:20px;padding:5px;padding-left:9px;word-break: break-word;">{{$t('statement.adtfd')}}</div>
              <i @click="isTipsShow=false"
                 class="el-icon-close cursor_pointer"
                 style="float:right;color:#138DC7;margin:8px 9px 0 0"></i>
            </div>
            <el-alert v-if="!(filterTokenList.length>0&&filterTokenList[0].fieldsList.length>0)&&!drillThroughFieldsListarr.length>0"
                      style="margin-top:10px"
                      :closable="false"
                      center
                      :title="$t('statement.nmd')"
                      type="info"></el-alert>
            <div class="token-list"
                 v-if="filterTokenList.length>0&&filterTokenList[0].fieldsList.length>0">
              <div class="token-list-item"
                   v-for="(item, index) in filterTokenList"
                   :key="index">
                <!-- <el-divider v-if="!isShowChild" class="split-line"></el-divider> -->
                <div v-if="!isShowChild&&!isShowChildDrillThrough">
                  <div class="group-title"
                       style="backgroundColor:#F0F0F0;padding-left:9px;"
                       :style="{'margin-top':isTipsShow?'10px':0}">{{$t('statement.dsf')}}</div>
                  <div style="max-height: 150px;overflow:auto">
                    <div class="group-item"
                         v-for="(its, ii) in item.fieldsList"
                         :key="ii"
                         @click="its.type === 'user' ? openChild(its) : clickToken(its)"><span :style="{'font-weight':its.type === 'user'? '600' : '400'}">{{ its.type === 'user' ? its.label.replace(/[\{\}]/g,'') : its.label}}</span>
                      <i v-if="its.type === 'user'"
                         class="el-icon-arrow-right"
                         style="float:right;padding-top:10px"></i>
                    </div>
                  </div>
                </div>
                <div v-if="isShowChild&&!isShowChildDrillThrough">
                  <div class="group-item"
                       v-for="its in filteruserfieldsList"
                       :key="its.value"
                       @click="clickTokenchild(its)">{{ its.label }}
                  </div>
                </div>
              </div>
            </div>
            <div class="token-list"
                 v-if="drillThroughFieldsListarr.length>0">
              <div class="token-list-item">
                <div v-if="!isShowChild&&!isShowChildDrillThrough">
                  <div class="group-title"
                       style="backgroundColor:#F0F0F0;padding-left:9px;">{{$t('statement.dtf')}}</div>
                  <div style="max-height: 150px;overflow:auto">
                    <div class="group-item11"
                         v-for="(its, ii) in drillThroughFieldsListarr"
                         :key="ii"
                         @click="openChildDrillThrough(its,ii)">
                         <ZTooltip :content="its.datasetName"
                              :line="1"
                              placement="right">
                               <span style="font-weight:600">{{its.datasetName}}</span>
          
                              </ZTooltip>
                         
                      <i class="el-icon-arrow-right"
                         style="float:right;padding-top:10px"></i>
                    </div>
                  </div>
                </div>
                <div v-if="!isShowChild&&isShowChildDrillThrough"
                     style="max-height:442px;overflow:auto">
                  <div class="group-item"
                       v-for="its in childDrillThroughfieldsList"
                       :key="its.value"
                       @click="clickTokenchild(its,true)">{{ its.label }}
                  </div>
                </div>
              </div>
            </div>
            <div class="token-list"
                 v-if="ancestorsTokenList.length>0&&!isShowChildDrillThrough">
              <div class="token-list-item">
                <div v-for="item in ancestorsTokenList" :key="item.id">
                  <div class="group-title"
                       style="backgroundColor:#F0F0F0;padding-left:9px;"
                       :style="{'margin-top':isTipsShow?'10px':0}">{{item.name}}</div>
                  <div class="group-item"
                       v-for="its in item.tokenList"
                       :key="its.value"
                       @click="clickToken(its)">{{ its.label }}
                  </div>
                </div>
              </div>
            </div>
            <el-button size="mini"
                       type="primary"
                       plain
                       slot="reference"
                       style="padding:7px;border:none;">
              <span class="cuifont icon_insert_token"
                    style="fontSize:14px;"></span>
            </el-button>
          </el-popover>
        </el-tooltip>
      </div>
    </div>
    <div class="quill-footer-css">
      <el-checkbox v-model="priviewChecked" v-if="ispreView"
                   @change="onMessageChange">{{$t('custom.bots.preview')}}</el-checkbox>
      <div>
        <label for="">{{$t('statement.ct')}}</label>
        <el-select v-model="templateId"
                   filterable
                   clearable
                   :placeholder="scriptItem.hint"
                   default-first-option>
          <div class="template-page-link el-select-dropdown__item"
               @click="routerToTemplatePage">{{$t('statement.mmt')}}</div>
          <el-divider class="split-line"></el-divider>
          <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                     :key="ii"
                     :value="o[scriptItem.fieldValue]"
                     :label="o[scriptItem.fieldLabel]"></el-option>
        </el-select>
      </div>
      <el-popover placement="top"
                  width="205"
                  @hide="clearPopover"
                  v-model="editTemplatePopover">
        <el-form :model="editTemplateForm"
                 :rules="dataRule"
                 size="mini"
                 ref="template-form"
                 label-position="top">
          <el-form-item :label="$t('label.tn')"
                        prop="name">
            <el-input v-model="editTemplateForm.name"
                      :placeholder="$t('placeholder.pe')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('label.tt')"
                        prop="type">
            <!-- <el-input v-model="editTemplateForm.type"
                      placeholder="Please Select"></el-input> -->
            <el-select v-model="editTemplateForm.type"
                       :placeholder="$t('placeholder.ps')">
              <el-option v-for="its in ['teams_message','email']"
                         :key="its"
                         :label="its"
                         :value="its"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="viewTemplatePage">{{$t('statement.vaa')}}</el-checkbox>
          </el-form-item>
        </el-form>
        <div class="popover-footer-btn">
          <el-button size="mini"
                     @click="editTemplatePopover = false">{{$t('attribute.close')}}</el-button>
          <el-button size="mini"
                     type="primary"
                     :loading='addBtnLoading'
                     @click="addMessageTemplate">{{$t('attribute.add')}}</el-button>
        </div>
        <el-button size="mini"
                   type="primary"
                   plain
                   style="margin-right:15px;padding:7px;border:none;"
                   slot="reference">
          <!-- <span class="cuifont icon_mail_add"
                style="fontSize:14px;"></span> -->
          <span style="fontSize:14px;">{{$t('statement.saat')}}</span>
        </el-button>
        <!-- <div class="cuifont icon_mail_add"
           slot="reference"></div> -->
      </el-popover>
    </div>
    <div v-if="priviewChecked">
      <el-switch v-model="switchPreview"
                 active-text=" Dark Mode"
                 inactive-text="Light Mode ">
      </el-switch>
      <div v-if="!switchPreview"
           class="ql-editor">
        <div style="background-color:#FFFFFF;color:#1e1e1e;"
             v-html="priviewMessage"></div>
      </div>
      <div v-else
           class="ql-editor">
        <div style="background-color:#292929;color:#FFFFFF;"
             v-html="priviewMessage"></div>
      </div>
    </div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import { debounce } from 'lodash'
import ZTinymce from '@/components/storybook/z-tinymce/index.vue'
import ZTooltip from '@/components/storybook/z-tooltip'
import { findAncestors } from '@/utils/common'
export default {
  props: {
    blockInfo: {
      type: Object,
      default: () => { }
    },
    labelInfo: {
      type: String
    },
    ispreView: {
      type: Boolean,
      default: false
    },
  },
  mixins: [mixinTypeViewModule],
  components: {
    ZTinymce,
    ZTooltip
  },
  inject: { 
    botInfo: { default: () => {} },
    blockDataSource: { default: () => [] },
   },
  data () {
    return {
      editorOption: {
        name: '471',
        modules: {
          toolbar: [
            ['code-block'],
            [{ 'direction': 'rtl' }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }],
            [{ 'background': [] }],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'font': ['sans-serif', 'monospace', 'serif'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'align': [] }],
            ['link'],
            ['clean']
          ]
        },
        theme: 'snow',
        placeholder: ''
      },
      templateId: null,
      editTemplatePopover: false,
      editTemplateForm: {
        name: null,
        type: null
      },
      viewTemplatePage: false,
      dataRule: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        type: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      addBtnLoading: false,
      insertTokenPopover: false,
      searchToken: null,
      searchTokenchild: null,
      tokenList: [],
      filterTokenList: [],
      priviewChecked: false,
      priviewMessage: null,
      switchPreview: false,
      isTipsShow: true,
      isShowChild: false,
      isShowChildDrillThrough: false,
      drillThroughFieldsList: [],
      drillThroughFieldsListarr: [],
      childDrillThroughfieldsList: [],
      childDrillThroughfieldsListarr: [],
      filteruserfieldsList: [],
      fatherfield: null,
      fatherfieldDrillThrough: null,
      userfieldsList: [{ label: '{{headUrl}}', value: 'headUrl' },
      { label: '{{email}}', value: 'email' },
      { label: '{{firstName}}', value: 'firstName' },
      { label: '{{lastName}}', value: 'lastName' },
      { label: '{{fullName}}', value: 'fullName' }],
      toolbar: ['slack-bold slack-italic slack-strike-through slack-link'],
      ancestorsTokenList: [],
    }
  },
  watch: {
    isShowChild (val) {
      if (!val) {
        this.searchTokenchild = null
        this.resetFilterTokenchildList(this.searchTokenchild)
      }
    },
    isShowChildDrillThrough (val) {
      if (!val) {
        this.searchTokenchild = null
        this.resetFilterTokenchildList(this.searchTokenchild)
      }
    },
    insertTokenPopover: {
      handler: function (val) {
        if (val) {
          this.isTipsShow = true
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
          this.searchToken = null
          this.resetFilterTokenList(this.searchToken)
          this.searchTokenchild = null
          this.resetFilterTokenchildList(this.searchTokenchild)
          this.isShowChild = false
          this.isShowChildDrillThrough = false
        }
      },
      immediate: true
    },
    editTemplatePopover: {
      handler: function (val) {
        if (val) {
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
        }
      },
      immediate: true
    },
    templateId (val) {
      if (val) {
        try {
          this.dataForm[this.scriptItem.text] = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].find(e => e[this.scriptItem.fieldValue] === this.templateId)[this.scriptItem.templateFields]
          this.$refs['myTextEditor'].retryRender(this.dataForm[this.scriptItem.text])
        } catch (error) {
        }

      }
    }
  },
  filters: {
    labelFilter (val) {
      val = val.replace(/\{/, '').replace(/\}/, '')
    }
  },
  created () {
    try {
      if (this.blockDataSource) {
        const ancestors = findAncestors(this.blockDataSource(), this.blockInfo.id);
        let res = ancestors.filter(e => e?.paramsJson?.tokenList)
        this.ancestorsTokenList = res.map(e => {
          return {
            name:e.name,
            tokenList: e.paramsJson.tokenList.map(v=>{
              return {
                label: `{{${v.label}}}`,
                value: v.value
              }
            })
          }
        })
      }
    } catch (error) {

    }
    // this.initSlectTemp()
    this.initTempSelectDatasetKey()
    if (this.botInfo() && this.botInfo().triggerType === 'Stream') {
      this.getTemplateParamsList()
    } else {
      this.getTokenList()
    }
    if (this.labelInfo && this.labelInfo === 'Microsoft Teams Channel') {
      this.userfieldsList.unshift({
        label: `{{ @ }}`,
        value: 'fullName'
      })
    }
    this.filteruserfieldsList = this.userfieldsList
  },
  methods: {
    // initSlectTemp () {
    //   if (this.dataForm[this.scriptItem.resultValue] === undefined || this.dataForm[this.scriptItem.resultValue] === null) {
    //     this.dataForm[this.scriptItem.resultValue] = ''
    //   }
    // },
    initTempSelectDatasetKey () {
      if (!this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`]) this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`] = []
    },
    gotoback () {
      this.isShowChild = false
      this.isShowChildDrillThrough = false
    },
    mouseDownListener (event) {
      if (!event.target.closest('.block-model-dialog')) {
      } else {
        this.insertTokenPopover = false
        this.editTemplatePopover = false
      }
    },
    routerToTemplatePage () {
      this.$confirm(this.$t('custom.leaveTips'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.$emit('hiddenSettingModel')
          this.$root.eventBus.$emit('viewAfterAdding')
          this.$router.push({
            name: 'mspbots-template-management-email-and-message-index'
          })
        })
        .catch(() => { })
    },
    addMessageTemplate () {
      this.$refs['template-form'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.addBtnLoading = true
        const params = {
          template: this.dataForm[this.scriptItem.text] || '',
          ...this.editTemplateForm
        }
        this.$interface.schedule.saveTemplateInfoApi(params)
          .then(({ data: res }) => {
            this.addBtnLoading = false
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message.success(res.msg)
            this.editTemplatePopover = false
            this.init()
            this.viewTemplatePage && this.routerToTemplatePage()
          }).catch(() => {
            this.addBtnLoading = false
          })
      })
    },
    clearPopover () {
      this.$refs['template-form'].resetFields()
      this.viewTemplatePage = false
    },
    getTokenList () {
      let id = this.$store.state.bot.id
      let type = this.$store.state.bot.type
      this.tokenList = []
      if (!id) {
        return
      }
      const params = {}
      type === 'dataset' && (params['datasetId'] = id)
      type === 'widget' && (params['gadgetId'] = id)
      params.showColumn = true
      this.$interface.reports.getFieldsListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.tokenList = []
            return false
          }
          if (res.querySelectedColumns) {
            this.dataForm.resultValue = res.querySelectedColumns
            this.drillThroughFieldsList = res.querySelectedColumns
            this.drillThroughFieldsList.forEach(item => {
              item.data.forEach(its => {
                its.label = `{{${its.alias}}}`
                its.value = its.alias
              })
            })
            this.drillThroughFieldsListarr = this.drillThroughFieldsList
          }
          let tempList = []
          res.data.forEach(item => {
            if (item.type === 'user') {
              tempList.unshift({
                label: `{{${item.name}}}`,
                value: item.name,
                type: item.type
              })
            } else {
              tempList.push({
                label: `{{${item.name}}}`,
                value: item.name,
                type: item.type
              })
            }
          })
          this.tokenList.push({
            name: this.$store.state.bot.name,
            fieldsList: tempList
          })
          this.$nextTick(() => {
            this.resetFilterTokenList()
          })
        }).catch(() => {
          this.tokenList = []
        })
    },
    getTemplateParamsList () {
      var _self = this
      _self.$interface.schedule.getTemplateFieldsListApi()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return _self.$message.error(res.msg)
          }
          var name
          if (_self.botInfo().sysBotScriptList.length === 1) {
            name = _self.botInfo().sysBotScriptList[0].paramsValue.type
          } else {
            var block = _self.botInfo().flowSetting.find(item => item.id === 0)
            var sysbot = _self.botInfo().sysBotScriptList.find(item => item.scriptId === block.blockId)
            name = sysbot.paramsValue.type
          }
          var result = res.data.find(i => i.name === name)
          let tempList = []
          result.info.forEach(item => {
            tempList.push({
              label: `{{${item.key}}}`,
              value: item.key,
              type: item.type
            })
          })
          tempList.push({
            label: `{{email}}`,
            value: 'email',
            type: 'text'
          })
          tempList.push({
            label: `{{firstName}}`,
            value: 'firstName',
            type: 'text'
          })
          tempList.push({
            label: `{{lastName}}`,
            value: 'lastName',
            type: 'text'
          })
          tempList.push({
            label: `{{fullName}}`,
            value: 'fullName',
            type: 'text'
          })
          this.tokenList.push({
            name: this.$store.state.bot.name,
            fieldsList: tempList
          })
          this.$nextTick(() => {
            this.resetFilterTokenList()
          })
        }).catch(() => { })
    },
    resetFilterTokenList (val) {
      let searchVal = val || this.searchToken
      if (searchVal) {
        let copyData = this._.cloneDeep(this.tokenList)
        for (let i = 0; i < copyData.length; i++) {
          copyData[i].fieldsList = copyData[i].fieldsList.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        }
        this.filterTokenList = copyData
      } else {
        this.filterTokenList = this.tokenList
      }
      if (searchVal) {
        let copyData = JSON.parse(JSON.stringify(this.drillThroughFieldsList))
        copyData = copyData.filter(its => its.datasetName.toLowerCase().includes(searchVal.toLowerCase()))
        this.drillThroughFieldsListarr = copyData
      } else {
        this.drillThroughFieldsListarr = this.drillThroughFieldsList
      }
    },
    resetFilterTokenchildList (val) {
      let searchVal = val || this.searchTokenchild
      if (searchVal) {
        let copyData = this._.cloneDeep(this.userfieldsList)
        copyData = copyData.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        this.filteruserfieldsList = copyData
      } else {
        this.filteruserfieldsList = this.userfieldsList
      }
      if (searchVal) {
        let copyData = this._.cloneDeep(this.childDrillThroughfieldsListarr)
        copyData = copyData.filter(its => its.label.toLowerCase().includes(searchVal.toLowerCase()))
        this.childDrillThroughfieldsList = copyData
      } else {
        this.childDrillThroughfieldsList = this.childDrillThroughfieldsListarr
      }
    },
    getFilterTokenList: debounce(function (val) {
      this.resetFilterTokenList(val)
    }, 800),
    getFilterTokenchildList: debounce(function (val) {
      this.resetFilterTokenchildList(val)
    }, 800),
    clickToken (its) {
      if (!(this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].find(item => item.field === its.value))) {
        this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].push({
          field: its.value,
          dbType: its.type
        })
      }
      this.insertFields(its.value)
    },
    clickTokenchild (its, isDrillThrough) {

      if (isDrillThrough) {
        this.insertFields(`${this.fatherfield}#${its.value}`)
      } else {
        if (this.labelInfo && this.labelInfo === 'Microsoft Teams Channel' && its.label === '{{ @ }}') {
          this.insertFields(`@${this.fatherfield}.${its.value}`)
        } else {
          this.insertFields(`${this.fatherfield}.${its.value}`)
        }
      }
    },
    openChild (its) {
      this.fatherfield = its.value
      this.isShowChild = true
    },
    openChildDrillThrough (its, index) {
      this.fatherfield = its.datasetName
      this.isShowChildDrillThrough = true
      this.childDrillThroughfieldsListarr = this.drillThroughFieldsListarr[index].data
      this.childDrillThroughfieldsList = this.childDrillThroughfieldsListarr
    },
    insertFields (value) {
      if (!value) {
        return false
      }
      this.$refs['myTextEditor'].focus()
      const range = this.$refs['myTextEditor'].getRng()

      const node = document.createElement('span');
      node.innerHTML = `{{${value}}}`;

      range.insertNode(node);


    },

    deleteDatasetKey () {
      let arr = []
      this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`].forEach(element => {
        if (this.dataForm[this.scriptItem.text].indexOf(`{${element.field}}`) !== -1) arr.push(element)
      })
      this.dataForm[`${this.scriptItem.datasetKeyStore}UseFidld`] = arr
    },
    onMessageChange () {
      this.deleteDatasetKey()
      this.priviewMessage = this.dataForm[this.scriptItem.text]
      this.$forceUpdate()
    }
  }
}
</script>

<style lang='scss'>
.quill-custom-css {
  position: relative;
  .ql-editor {
    img {
      image-rendering: -moz-crisp-edges; /* Firefox */
      image-rendering: -o-crisp-edges; /* Opera */
      image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
      width: auto;
      height: auto;
    }
  }
  .insert-token {
    position: absolute;
    right: 10px;
    top: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .quill-content-css {
    .ql-snow {
      padding: 0 20px;
      & .ql-tooltip {
        z-index: 1;
        left: 10px !important;
      }
      &.ql-toolbar button,
      & .ql-toolbar button,
      & .ql-color-picker,
      & .ql-icon-picker {
        width: 14px;
        height: 14px;
        padding: 0;
        & svg {
          float: left;
        }
      }
      & .ql-picker-label {
        padding: 0;
        border: none;
        float: left;
      }
      & .ql-formats {
        margin-right: 20px;
        & button {
          margin-right: 20px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
.quill-footer-css {
  // border: 1px solid #ccc;
  margin-top: 10px;
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    border: none;
    &::-webkit-input-placeholder {
      color: $--theme-color !important;
    }
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .el-popover .el-select {
    width: 100%;
  }
}
.split-line {
  margin: 0 !important;
}
.template-page-link {
  width: 100%;
  color: $--theme-color;
}
</style>
<style scoped lang='scss'>
// ::v-deep .mce-top-part {
//   display: none !important;
// }
.cursor_pointer {
  cursor: pointer;
}
.popover-footer-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.token-list {
  &-item {
    .group-title {
      color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
    }
    .group-item {
      height: 34px;
      line-height: 34px;
      padding: 0 10px 0 19px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        background: #f5f7fa;
      }
    }
    .group-item11 {
      display: flex;
      height: 34px;
      line-height: 34px;
      padding: 0 10px 0 19px;
     
      cursor: pointer;
      &:hover {
        background: #f5f7fa;
      }
    }
  }
}
</style>
